<template>
  <div class="home  d-flex flex-column my-container">

    <div class="title-container" v-if="permersion.search">
      <div class="search-content">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-input v-model="searchModel.workModelCode" clearable @clear="searchClick" placeholder="请输入工作流模型编码" prefix-icon="el-icon-search"/>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchModel.workModelName" clearable @clear="searchClick" placeholder="请输入工作流模型名称" prefix-icon="el-icon-search"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="" v-if="permersion.search">

        <el-form :inline="true">
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDetail(0)">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addMoudle()">添加模板</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <common-table v-loading="tableLoading" show-index show-check-box :columns="columns" :list="list">
        </common-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>
    <template v-if="dialogVisible">
      <MoudleDialog :dialogVis="dialogVisible" @update:dialogVis="closeDialog"></MoudleDialog>
    </template>
  </div>
</template>

<script>
  import { queryMyWorkModelPage, deleteWorkFlow } from "@/api/workflow/index"
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import MoudleDialog from "./dialog/index.vue"

  export default {
    components: {
      CommonTable,
      MoudleDialog
    },
    data() {
      return {
        value: "",
        count: 0,
        dialogVisible: false,
        permersion: {
          add: true,
          del: true,
          update: true,
          search: true
        },
        searchModel: {
          workModelCode: "",
          workModelName: ""
        },
        columns: [
          {
            title: "工作流模型编码",
            prop: "workModelCode",
            align: "center"
          },

          {
            title: "工作流模型名称",
            prop: "workModelName",
            align: "center"
          },
          {
            title: "工作流模型版本号",
            prop: "workModelVersion",
            align: "center"
          },
          {
            title: "工作流模型类型",
            prop: "workModelType",
            align: "center"
          },


          {
            title: "轮询周期",
            prop: "workTime",
            align: "center"
          },
          {
            title: "创建人",
            prop: "createByName",
            align: "center"
          },
          {
            title: "创建时间",
            prop: "createTime",
            align: "center"
          },
          {
            title: "更新人",
            prop: "updateByName",
            align: "center"
          },
          {
            title: "更新时间",
            prop: "updateTime",
            align: "center"
          },
          // {
          //     title: "是否启用 ",
          //     prop: "deviceType",
          //     align: "center",
          //     render: (h, params) => {
          //         return h('span', [h("span", {
          //         }, params.row.status == 'on' ? '启用' : '关闭')])
          //     }
          // },
          {
            title: "操作",
            width: 300,
            align: "center",
            render: (h, params) => {
              return h("div", [h("el-button", {
                props: {
                  type: "success",
                  size: "mini"
                },
                on: {
                  click: () => {
                    this.handleDetail(1, params)
                  }
                }
              }, "查看"),
                h("el-button", {
                  props: {
                    type: "primary",
                    size: "mini"
                  },
                  on: {
                    click: () => {
                      this.handleInstantiate(params.row)
                    }
                  }
                }, "实例化"),
                h("el-button", {
                  props: {
                    type: "warning",
                    size: "mini"
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row)
                    }
                  }
                }, "删除")])
            }
          }
        ],
        list: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        tableLoading: false
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      pagination(pageItem) {
        // pageItem.page, pageItem.limit
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },
      handleDetail(type, row = { row: { workModelCode: "" } }) {

        this.$router.push({
          path: "/operationControl/workflowDetails",
          query: {
            type: type,
            workModelCode: row.row.workModelCode
          }
        })
      },
      async getTableList() {
        this.tableLoading = true
        const {
          workModelCode,
          workModelName
        } = this.searchModel
        const { status, success, object, message } = await queryMyWorkModelPage({
          ...this.page,
          workModelCode,
          workModelName
        })
        if (status == 200) {
          this.tableLoading = false
          this.list = object.data
          this.count = object.count
        }
      },
      searchClick() {
        this.getTableList()
      },
      refresh() {
        this.searchModel = {
          workModelCode: "",
          workModelName: ""
        }
        this.getTableList()
      },
      async handleDelete(row) {
        const { status, success, object, message } = await deleteWorkFlow({ workModelCode: row.workModelCode })
        if (status == 200) {
          this.refresh()
          this.$message({
            type: "success",
            message: message
          })
        }
      },
      closeDialog() {
        this.dialogVisible = false
      },
      addMoudle() {
        this.dialogVisible = true
      },
      handleInstantiate(row) {

        this.$router.push({
          path: "/instantiate/instantiateList",
          query: {
            projectCode: row.projectCode,
            workModelCode: row.workModelCode
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }
</style>
